<template>
    <div class="ccb_table" :style='{height: tableH + "px"}'  v-infinite-scroll="scrollLoading">
        <!-- 表格 -->
        <el-table
            ref="table"
            :data="list"
            style="width: 100%;overflow: auto"
            :stripe="stripe"
            :border="border"
            :highlight-current-row="highlightCurrentRow"
            :size="size"
            v-loading="loading"
        >
            
            <template  v-for="item in columns">
                <!-- 常态表格 -->
                <el-table-column
                    v-if="!item.type"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    :min-width="item.minWidth"
                    :fixed="item.fixed"
                    :align="item.align || 'center'"
                >
                </el-table-column>

                <!-- 常态表格（展示字段需转换） -->
                <el-table-column
                    v-if="item.type === 'propCode'"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    :min-width="item.minWidth"
                    :fixed="item.fixed"
                    :align="item.align || 'center'"
                >
                    <template slot-scope="scope">
                        <span v-for="code in item.codeName" :key="code.auth">
                            <span v-if="code.auth === scope.row.sex">{{ code.label }}</span>
                        </span>
                    </template>
                </el-table-column>

                <!-- link -->
                <el-table-column
                    v-if="item.type === 'link'"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :width="item.width"
                    :min-width="item.minWidth"
                    :fixed="item.fixed"
                    :align="item.align || 'center'"
                >
                    <template slot-scope="scope">
                        <el-button id="link" @click="handleClickLink(scope.row)" type="text" size="small">{{ scope.row[item.prop] }}</el-button>
                    </template>
                </el-table-column>

                <!-- 分级表头 -->
                <el-table-column
                    v-if="item.type === 'level'"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :fixed="item.fixed"
                    :align="item.align || 'center'"
                    :width="item.width"
                    :min-width="item.minWidth"
                >
                    <template v-if="item.type === 'level' && item.children">
                        <el-table-column
                            v-for="so in item.children"
                            :key="so.prop"
                            :prop="so.prop"
                            :label="so.label"
                            :fixed="so.fixed"
                            :align="so.align || 'center'"
                            :width="so.width"
                            :min-width="so.minWidth"
                        >
                            <template v-if="so.type === 'level' && so.children">
                                <el-table-column
                                    v-for="child in so.children"
                                    :key="child.prop"
                                    :prop="child.prop"
                                    :label="child.label"
                                    :fixed="child.fixed"
                                    :align="child.align || 'center'"
                                    :width="child.width"
                                    :min-width="child.minWidth"
                                >   
                                </el-table-column>
                            </template>
                        </el-table-column>
                    </template>
                </el-table-column>

                <!-- 操作项 -->
                <el-table-column
                    v-if="item.type === 'operation'"
                    :key="item.prop"
                    :label="item.label"
                    :width="item.width"
                    :min-width="item.minWidth"
                    :fixed="item.fixed"
                    :align="item.align || 'center'"
                >
                    <template slot-scope="scope">
                        <el-button
                            @click="handleClickOperation(scope.row)" 
                            type="text" 
                            size="small"
                            v-for="opt in item.operation"
                            :key="opt.auth"
                            :disabled="opt.disabled"
                            v-text="opt.authText"
                        >
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </el-table>
    </div>
</template>

<script>
export default {
    /*
        分级表头目前支持三级表头

        column: [
            { prop: 'name', label: '姓名', type: 'link' },
            { prop: 'age', label: '年龄' },
            { prop: 'sex', label: '性别' },
            { 
                label: '操作项', 
                type: 'operation',
                operation: [
                    { auth: 'update', authText: '编辑' },
                    { auth: 'delete', authText: '删除' },
                    { auth: 'detail', authText: '查看' }
                ] 
            }
        ]

        字段转换

           { 
                type: 'propCode',
                prop: 'sex', 
                label: '性别',
                codeName: [
                    { auth: 0, label: '女' },
                    { auth: 1, label: '男' },
                    { auth: 3, label: '应该是男的吧' },
                ]
            },
    **/

    name: 'Table',
    props: {
        columns: { type: Array, default: () => { return [] } },         // 表头信息（必传）
        list: { type: Array, default: () => { return [] } },            // 列表数据（必传）
        stripe: { type: Boolean, default: true },                       // 是否显示斑马线
        border: { type: Boolean, default: true },                       // 边框
        highlightCurrentRow: { type: Boolean, default: true },          // 是否高亮当前行
        size: { type: String, default: 'mini' },                        // 表格size（medium / small / mini）
        loading: { type: Boolean, default: false },                     // loading状态
        total: { type: Number, default: 0 },                            // 总数
    },
    data() {
        return {
            tableH: null,                                               // 列表高度
        }
    },
    methods: {
        // link点击
        handleClickLink(row) {
            this.$emit('handleClickLink', row);
            console.log('点击link')
        },

        // 点击操作项
        handleClickOperation(row) {
            this.$emit('operation', row);
            console.log('点击操作项')
        },

        // 滚动加载
        scrollLoading() {
            if(this.list.length === this.total) {
                this.$message.warning('数据已全部加载完成~');
            }else{
                this.$emit('scrollLoad');
            }
            console.log('滚动加载');
        }
    },
    mounted() {
        this.tableH = document.querySelector('.ccb_table').clientHeight;
    }
}
</script>

<style lang="scss" scoped>
.ccb_table {
    height: 100%;
    overflow-y: auto;

    .page_box {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
    }
}
</style>